/* eslint-disable */
import React, { useState, useEffect } from 'react';
import {
	Box,
	Badge, 
	Image,
	Button,
	Stack,
	Text,
	Icon,
	useColorModeValue
} from '@chakra-ui/react';

import chakraUI from '../../assets/images/chakra-ui.png';
import { AiFillStar } from 'react-icons/ai';


export default function CardPage() {

	const bgColor = useColorModeValue("gray.200", "gray.700");
	const textColor = useColorModeValue("gray.700", "gray.200");

	const [count, setCount] = useState(0);
	const [serialNumber, setSerialNumber] = useState(null);

	useEffect(() => {
		console.log('clearInterval:', serialNumber);
		return () => {
			if (serialNumber) {
				setSerialNumber(null);
				clearInterval(serialNumber);
			}
		}
	}, [serialNumber]);

	useEffect(() => {
		console.log('count Log:', count);
		
		setSerialNumber(setInterval(() => {
			setCount(count => (count + 1));
		}, 4000));
	}, []);

	const stopInterval = () => {
		console.log('count:', count);
		console.log('serialNumber:', serialNumber);
		if (serialNumber) {
			setSerialNumber(null);
			clearInterval(serialNumber);
		}
	}

	return (
		<Box w={3/4}  bgColor={bgColor} boxShadow="lg" borderRadius="lg" overflow="hidden">
			<Image src={chakraUI}></Image>
			<Box p="3">
				<Stack direction="row" align="center">
					<Badge borderRadius="full" variant="solid" colorScheme="teal">NEW</Badge>
					<Badge borderRadius="full" variant="solid" colorScheme="teal">CHAKRA-UI</Badge>
					<Badge borderRadius="full" variant="solid" colorScheme="teal">REACT</Badge>
					<Text pl="4px"color={textColor}>拉勾出品，必属精品</Text>
					<Text pl="4px"color={textColor} cursor="pointer" onClick={stopInterval}>{count}</Text>
				</Stack>
				<Text fontSize="xl" pt="3" pb="2" color="gray.500" as="h3" colorScheme={textColor} fontWeight="semibold">Chakra-UI 框架专题课程</Text>
				<Text fontSize="sm" pb="2" lineHeight="tall" fontWeight="light" color={textColor}>
					Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建
          React 应用所需的UI组件.
          在整个应用程序中，在任何组件上快速、轻松地引用主题中的值。组件的构建考虑到了组合。你可以利用任何组件来创造新事物。Chakra-UI 严格遵循WAI-ARIA标准。所有组件都有适当的属性和现成的键盘交互。Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建
          React 应用所需的UI组件.
				</Text>
				<Stack direction="row" align="center">
					<Icon color="teal.500" as={AiFillStar}></Icon>
					<Icon color="teal.500" as={AiFillStar}></Icon>
					<Icon color="teal.500" as={AiFillStar}></Icon>
					<Icon color="teal.500" as={AiFillStar}></Icon>
					<Icon as={AiFillStar}></Icon>
					<Text ml="1">100 评论</Text>
				</Stack>
			</Box>
			<Button colorScheme="teal" _focus={{boxShadow: 'none'}} w="100%">登 录</Button>
		</Box>
	)
}
